---
layout: default
---

{% include topnav.html %}

<main class="wrapper">
  <nav class="side-nav">
    <button id="toggleNavButton">Menu</button>
    <ul>
      {%- for item in site.data.guide.toc -%}
      {%- if item[1].header -%}
      <li class="side-nav-header">
        {{item[1].title}}
      </li>
      {%- else -%}
      <li class="{% if page.url == item[1].url %}active{% endif %} {% unless item[1].header or item[1].toplevel %}side-nav-indent{% endunless %}">
        <a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a>
      </li>
      {%- endif -%}
      {%- endfor -%}      
    </ul>    
  </nav>

  <article>
    {% include version-banner.html %}
    <h1>{{page.title}}</h1>
    {{ content }}
  </article>
  
</main>

<script>
  toggleNavButton.addEventListener('click', function(event) {
    const nav = event.target.parentElement;
    nav.classList.toggle('open');
  });
</script>
